<!--
 * @Author: boyyang
 * @Date: 2022-01-29 20:08:48
 * @LastEditTime: 2022-01-30 16:41:44
 * @LastEditors: boyyang
 * @Description: 
 * @FilePath: \boyyang\src\components\menuChange\index.vue
-->

<template>
    <div class="next-page">
        <div
            :class="['btn-left', 'btn', { 'btn-active': activeIndex == i }]"
            v-for="(item, i) in props.buttons"
            @click="btnClick(i)"
            :key="i"
        >
            <i :class="['iconfont', item.icon]"></i>
        </div>
    </div>
</template>

<script lang="ts" setup>

interface IButtons {
    icon?: string;
}

interface IMenuChangeProps {
    buttons?: Array<IButtons>
}

interface IMenuChangeEmits {
    (e: 'btnClick', index: number): void
}

const activeIndex = ref<number>(0)

const props = withDefaults(defineProps<IMenuChangeProps>(), {})

const emits = defineEmits<IMenuChangeEmits>()

const btnClick = (index: number) => {
    emits('btnClick', index)
}

</script>

<style scoped lang="scss">
.next-page {
    position: absolute;
    bottom: 25px;
    height: 50px;

    box-shadow: 3px 4px 2px 2px rgba(0, 0, 0, 0.5);

    border-radius: 4px;
    overflow: hidden;

    display: flex;
    justify-items: center;
    align-items: center;
    background-color: #fff;

    z-index: 999;
}

.btn {
    box-sizing: border-box;
    width: 55px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 600;
    font-size: 15px;

    cursor: pointer;

    &:hover {
        background-color: rgb(16, 167, 146);
        color: whitesmoke;
    }
}

.btn-active {
    background-color: #ff4777;
    color: whitesmoke;
}

.btn-disable {
    cursor: not-allowed;
}
</style>
